<template>
  <!--商机主界面-->
  <div class="con">
    <div class="row" v-show="isRow">
      <div style="display: inline-block;border:0px solid red;float: left;width:30%;margin-top: 17px;margin-left: 15px;">
        <el-button type="primary" icon="el-icon-plus"  @click="addBusiness"  v-if="perssionButton.indexOf('business_edit') >-1" size="small">
          新增商机
        </el-button>
        <el-select
          v-model="selectDept"
          size="small"
          v-if="postLevel==1" style="width: 117px;margin-left: 15px;" @change="selectViewableData" value-key="value">
          <el-option v-for=" b in businessOption" :key="b.value" :label="b.label" :value="b.value" ></el-option>
        </el-select>
      </div>
      <div style="border:0px solid red;width:52%;float: right;margin-top: 17px;">
        <el-select v-model="speedId"  size="small" style="width: 135px;"
                   value-key="speedId" @change="searchInfo">
          <el-option label="全部阶段" value="0"></el-option>
          <el-option  v-for="item in speedList" :key="item.speedId" size="small"
                      :label="item.speedContext" :value="item.speedId">
          </el-option>
        </el-select>
        <span style="color: #D6CCCF;font-size: 14px;"> &nbsp;&nbsp;  | &nbsp;&nbsp;</span>
        <span style="color: #667B8F;font-size: 14px;">搜索：</span>
        <el-input  @change="searchInfo"  placeholder="商机名称/客户名称"
                   v-model="bsName" suffix-icon="el-icon-search" style="width: 217px;" size="small"   clearable>
        </el-input>
        <el-button icon="el-icon-download"  style="width:75px;"
                   @click="allExportExcel" size="small">导出</el-button>
        <el-popover v-if="activeTab=='first'"
                    placement="bottom"
                    title="全部列名"
                    width="100"
                    trigger="manual"
                    v-model="visible1">
          <el-checkbox-group v-model="colOptions1">
            <el-checkbox v-for="item in colSelect1"
                         :disabled="item=='商机名称' || item=='客户名称'"
                         :label="item"
                         :key="item"
                         style="display: block" ></el-checkbox>
          </el-checkbox-group>
          <span style="color: red;font-size: x-small;">注：字段过多会出现水平滚动条</span>
          <el-button icon="el-icon-s-tools"  style="width:75px;"
                     slot="reference" @click="visible1 = !visible1" size="small">设置</el-button>
        </el-popover>
        <el-popover
          v-if=" activeTab=='second'"
          placement="bottom"
          title="全部列名"
          width="100"
          trigger="manual"
          v-model="visible2">
          <el-checkbox-group v-model="colOptions2">
            <el-checkbox v-for="item in colSelect2"
                         :disabled="item=='商机名称' || item=='客户名称'"
                         :label="item"
                         :key="item"
                         style="display: block" ></el-checkbox>
          </el-checkbox-group>
          <span style="color: red;font-size: x-small;">注：字段过多会出现水平滚动条</span>
          <el-button icon="el-icon-s-tools"  style="width:74px;" slot="reference"
                     @click="visible2 = !visible2" size="small">设置</el-button>
        </el-popover>
      </div>

    </div>
    <!--操作 -->
    <div class="operate" v-show="isShow">
      <el-row style="margin-top:15px;">
        <el-col :span="2" class="col_border">
          已选中<span class="selected—count">{{count}}</span>项
        </el-col>
        <el-col :span="2" class="col_border" v-show="isOne" v-if="perssionButton.indexOf('business_edit') >-1">
          <el-button icon="el-icon-edit" style="border:0"
                     plain size="mini" @click="updataBusiness()" >修改</el-button>
        </el-col>
        <el-col :span="2" class="col_border" v-show = "isDelete" v-if="perssionButton.indexOf('business_delete') >-1">
          <el-button icon="el-icon-delete" style="border:0"
                     plain size="mini" @click="deleteBusiness()" >删除</el-button>
        </el-col>
        <el-col :span="2" class="col_border">
          <el-button icon="el-icon-download" style="border:0"
                     plain size="mini" @click="batchExportExcelBefore()">导出</el-button>
        </el-col>
        <el-col :span="6" class="col_border1" v-show="noSpecial" v-if="perssionButton.indexOf('business_follow') >-1">
          <el-button icon="el-icon-magic-stick" style="border:0"
                     plain size="mini" @click="setSpecial(0)">取消特别关注</el-button>
        </el-col>
        <el-col :span="6" class="col_border1" v-show="isSpecial" v-if="perssionButton.indexOf('business_follow') >-1">
          <el-button icon="el-icon-s-opportunity" style="border:0"
                     plain size="mini" @click="setSpecial(1)">设为特别关注</el-button>
        </el-col>
      </el-row>
    </div>

    <el-tabs type="border-card" style="margin-top: 10px;" v-model="activeTab" @tab-click="handleClick">

      <el-tab-pane :label="title" name="second">
        <div class="dataOne">
          <el-table
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="businessList"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            style="width: 100%;"
            max-height="340">
            <el-table-column  type="selection"   width="55" >
            </el-table-column>
            <el-table-column  label="商机名称"   min-width="150"   v-if="colData2[0].istrue">
              <template slot-scope="scope">
                  <el-link :underline="false" @click="href(scope.row)"
                           type="primary" icon="el-icon-s-promotion" v-if="perssionButton.indexOf('business_look')>-1"> {{ scope.row.businessName }}</el-link>
                  <span v-if="perssionButton.indexOf('business_look')<0">
                    <i class="el-icon-s-promotion"></i>{{ scope.row.businessName }}
                  </span>
              </template>
            </el-table-column>
            <el-table-column  label="客户名称" :show-overflow-tooltip="true"  v-if="colData2[1].istrue"  min-width="160" >
              <template slot-scope="sco">
                <el-tooltip placement="top">
                  <div slot="content">{{ sco.row.customerByCustomId.cusName}}</div>
                  <span>{{ sco.row.customerByCustomId.cusName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column  prop="budinessEmpid.empName" label="负责人"  v-if="colData2[2].istrue"  min-width="120" >
            </el-table-column>
            <el-table-column  prop="culinkmanByCupId.cupName" label="联系人"  v-if="colData2[3].istrue"  min-width="120" >
            </el-table-column>
            <el-table-column  prop="culinkmanByCupId.cupPhone" label="联系电话"  v-if="colData2[4].istrue" min-width="120">
            </el-table-column>
            <el-table-column   label="预期金额"  v-if="colData2[5].istrue" min-width="120">
              <template slot-scope="fomatemoney2">
               {{fomatemoney2.row.expectedAmount|formatMoney}}
              </template>
            </el-table-column>
            <el-table-column  prop="speedInfoBySpeedId.speedContext" label="商机阶段"  v-if="colData2[6].istrue">
            </el-table-column>
            <el-table-column  v-if="colData2[7].istrue"  label="可能性" min-width="100">
              <template slot-scope="s">
                <el-progress :percentage="parseInt(s.row.speedInfoBySpeedId.possibility.substring(0, s.row.speedInfoBySpeedId.possibility.length-1))" :show-text='true' ></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="商机状态" v-if="colData2[8].istrue">
              <template slot-scope="opp2">
                <span v-if="opp2.row.opportunityStatus==1">跟踪</span>
                <span v-if="opp2.row.opportunityStatus==2">搁置</span>
                <span v-if="opp2.row.opportunityStatus==3">成功</span>
                <span v-if="opp2.row.opportunityStatus==4">失败</span>
              </template>
            </el-table-column>
            <el-table-column label="是否关注" v-if="colData2[9].istrue">
              <template slot-scope="guanzhu">
                <span v-if="guanzhu.row.specialAttention==1" style="color:blue">已关注</span>
                <span v-if="guanzhu.row.specialAttention==0">未关注</span>
              </template>
            </el-table-column>
            <el-table-column     label="更新时间"  v-if="colData2[10].istrue">
              <template slot-scope="c">{{c.row.updateTime|formatDate}}</template>
            </el-table-column>
            <el-table-column prop="estimatedSigningTime" width="150" label="预计签约时间"   v-if="colData2[11].istrue">
            </el-table-column>
            <el-table-column  width="150" label="创建时间"   v-if="colData2[12].istrue">
              <template slot-scope="b">{{b.row. businessTime|formatDate}}</template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-row>
            <el-col :span="12">
          <!-- <p>
             本页预期金额/总计预期金额
           </p>-->
            </el-col>
            <el-col :sapn="12" style="height: 38px;">
                <el-pagination :page-sizes="sizes" layout="total, sizes, prev, pager, next, jumper"
                               @size-change="handleSizeChange" :total="totalSize" :page-size="pageSize"
                               :current-page.sync="currentPage" @current-change="changePage"
                               style="float: right;position: relative;top: 8px;">
                </el-pagination>
            </el-col>
          </el-row>


        </div>
      </el-tab-pane>
      <el-tab-pane label="特别关注商机"  name="first">
        <el-table
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="specialBusiness"
          ref="specialMultipleTable"
          @selection-change="specialHandleSelectionChange"
          style="width: 100%;"
          min-height="340">
          <el-table-column  type="selection"   width="55" >
          </el-table-column>
          <el-table-column  label="商机名称"    v-if="colData1[0].istrue"  min-width="150"  >
            <template slot-scope="scope">
              <el-link :underline="false" @click="href(scope.row)"
                       type="primary" icon="el-icon-s-promotion" v-if="perssionButton.indexOf('business_look')>-1"> {{ scope.row.businessName }}</el-link>
              <span v-if="perssionButton.indexOf('business_look')<0">
                    <i class="el-icon-s-promotion"></i>{{ scope.row.businessName }}
              </span>
            </template>
          </el-table-column>[
          <el-table-column label="客户名称" :show-overflow-tooltip="true" v-if="colData1[1].istrue">
            <template slot-scope="sco">
              <el-tooltip placement="top">
                <div slot="content">{{ sco.row.customerByCustomId.cusName}}</div>
                <span>{{ sco.row.customerByCustomId.cusName}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column  prop="budinessEmpid.empName" label="负责人" v-if="colData1[2].istrue" >
          </el-table-column>
          <el-table-column  prop="culinkmanByCupId.cupName" label="联系人"  v-if="colData1[3].istrue">
          </el-table-column>
          <el-table-column  prop="culinkmanByCupId.cupPhone" label="联系电话"  v-if="colData1[4].istrue" min-width="120">
          </el-table-column>
          <el-table-column label="预期金额" v-if="colData1[5].istrue" >
            <template slot-scope="fomatemoney1">
              {{fomatemoney1.row.expectedAmount|formatMoney}}
            </template>
          </el-table-column>
          <el-table-column  prop="speedInfoBySpeedId.speedContext" label="商机阶段" v-if="colData1[6].istrue">
          </el-table-column>
          <el-table-column v-if="colData1[7].istrue" min-width="100"
                           label="可能性">
            <template slot-scope="s">
              <el-progress :percentage="parseInt(s.row.speedInfoBySpeedId.possibility.substring(0, s.row.speedInfoBySpeedId.possibility.length-1))" :show-text='true' ></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="商机状态" v-if="colData1[8].istrue">
            <template slot-scope="opp1">
              <span v-if="opp1.row.opportunityStatus==1">跟踪</span>
              <span v-if="opp1.row.opportunityStatus==2">搁置</span>
              <span v-if="opp1.row.opportunityStatus==3">成功</span>
              <span v-if="opp1.row.opportunityStatus==4">失败</span>
            </template>
          </el-table-column>
          <el-table-column    label="更新时间" v-if="colData1[9].istrue">
            <template slot-scope="c">{{c.row.updateTime|formatDate}}</template>
          </el-table-column>
          <el-table-column prop="estimatedSigningTime" width="150" label="预计签约时间"  v-if="colData1[10].istrue">
          </el-table-column>
          <el-table-column  label="创建时间"  v-if="colData1[11].istrue">
            <template slot-scope="b">{{b.row. businessTime|formatDate}}</template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row>
          <el-col :span="12">
            <!-- <p>
               本页预期金额/总计预期金额
             </p>-->
          </el-col>
          <el-col :sapn="12" style="height: 38px;">
            <el-pagination :page-sizes="ssizes" layout="total, sizes, prev, pager, next, jumper"
                           @size-change="shandleSizeChange"  :total="stotalSize" :page-size="spageSize"
                           :current-page.sync="scurrentPage" @current-change="schangePage"
                           style="float: right;position: relative;top: 8px;">
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
  import {formatTimeToStr} from '../assets/format.js'
  export default {
    inject: ['reload'],
    data() {
      return {
        loading: true,
        deptId: '',//记录部门id
        title: '',//面板标题
        businessOption: [
          {
            value: 1,
            label: '我的商机'
          },
          {
            value: 2,
            label: '下属商机'
          }
        ],
        bsName: '',//查询的商机名称
        speedId: '0',//下拉框赋值的商机状态
        isRow: true,//第一行
        multipleTable: [],//存放选中值的数组
        isShow: false,//批量操作
        isOne: true,//选中项为1就出现修改
        isDelete:true,//批量删除按钮的显示
        exportData: [],//需导出的我的商机
        exportSpecialData: [],//需导出特别关注的商机
        batchList: [],//批量导出数据处理数组
        oldData: [],//用于存旧数据的

        businessList: [],//商机数组
        speedList: [],//进度数组
        totalSize: 0,
        pageSize: 15,
        currentPage: 1,
        sizes: [15, 30, 60, 100],//分页可改变的页数
        //特别关心
        isSpecial: false,//设置特别关注
        noSpecial: false,//取消特别关注
        activeTab: 'second',//行动面板
        //特别关注的商机
        specialBusiness: [],//特别关注商机列表
        stotalSize: 0,
        spageSize: 15,
        scurrentPage: 1,
        ssizes: [15, 30, 60, 100],//分页可改变的页数
        visible1: false,
        colData1: [
          {title: "商机名称", istrue: true},
          {title: "客户名称", istrue: true},
          {title: "负责人", istrue: true},
          {title: "联系人", istrue: true},
          {title: "联系电话", istrue: true},
          {title: "预期金额", istrue: true},
          {title: "商机阶段", istrue: true},
          {title: "可能性", istrue: true},
          {title: "商机状态", istrue: true},
          {title: "更新时间", istrue: true},
          {title: "预计签约时间", istrue: true},
          {title: "创建时间", istrue: true}
        ],
        colOptions1: [
          "商机名称", "客户名称",
          "负责人", "联系人",
          "联系电话", "预期金额",
          "商机阶段", "可能性",
          "商机状态",
          "更新时间", "预计签约时间",
          "创建时间"], //默认全选
        colSelect1: [
          "商机名称", "客户名称",
          "负责人", "联系人",
          "联系电话", "预期金额",
          "商机阶段", "可能性",
          "商机状态",
          "更新时间", "预计签约时间",
          "创建时间"],
        visible2: false,
        colData2: [
          {title: "商机名称", istrue: true},
          {title: "客户名称", istrue: true},
          {title: "负责人", istrue: true},
          {title: "联系人", istrue: true},
          {title: "联系电话", istrue: true},
          {title: "预期金额", istrue: true},
          {title: "商机阶段", istrue: true},
          {title: "可能性", istrue: true},
          {title: "商机状态", istrue: true},
          {title: "是否关注", istrue: true},
          {title: "更新时间", istrue: true},
          {title: "预计签约时间", istrue: true},
          {title: "创建时间", istrue: true}
        ],
        colOptions2: [
          "商机名称", "客户名称",
          "负责人", "联系人",
          "联系电话", "预期金额",
          "商机阶段", "可能性", "商机状态",
          "是否关注", "更新时间",
          "预计签约时间", "创建时间"
        ], //默认全选
        colSelect2: [
          "商机名称", "客户名称",
          "负责人", "联系人",
          "联系电话", "预期金额",
          "商机阶段", "可能性", "商机状态",
          "是否关注", "更新时间",
          "预计签约时间", "创建时间"
        ],
        tableInfo: [
          {
            name: '商机名称',
            value: 'businessName',
          },
          {
            name: '客户名称',
            value: 'cusName'
          },
          {
            name: '负责人',
            value: 'empName',
          },
          {
            name: '联系人',
            value: 'cupName',
          },
          {
            name: '联系电话',
            value: 'cupPhone'
          },
          {
            name: '预期金额',
            value: 'expectedAmount1',
          },
          {
            name: '商机阶段',
            value: 'speedContext',
          },
          {
            name: '可能性',
            value: 'possibility',
          },
          {
            name: '商机状态',
            value: 'opportunityStatus1'
          },
          {
            name: '是否关注',
            value: 'specialAttention',
          },
          {
            name: "更新时间",
            value: 'updateTime1'
          },
          {
            name: '预计签约时间',
            value: 'estimatedSigningTime',
          },
          {
            name: '创建时间',
            value: 'businessTime1',
          },
        ],
        perssionButton: [],
        postLevel: '',
        drop: {
          value: 'value',
          label: 'label',
          children: 'childrenDept',
          checkStrictly: true,
        },
        selectDept: 1,
        employeesId: ''
      }
    }, created: function () {
      this.employeesId = JSON.parse(sessionStorage.getItem('user')).employeesId;//获取员工id
      this.$axios.get("http://localhost:8088/buInfo/speed")
        .then(v => {
          this.speedList = v.data;
        }).catch()
      this.authentication();
      this.selectViewableData();
      this.initButton();
    },
    methods: {
      //验证用户身份
      authentication() {
        let id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
        //获取用户是否是一级角色
        this.$axios.get("http://localhost:8088/is_one_Role",
          {
            params: {
              empId: id
            }
          }).then(v => {
          if (v.data.postLevel == 1) {//用户是一级角色
            //查询出能看到的部门信息
            if (v.data.deptId == 1) {
              this.businessOption.push({value: 3, label: '全部商机'});
            }
            this.postLevel = 1;
          }
          this.deptId = v.data.deptId;//记录部门id
        }).catch();
      },
      //查看可看数据
      selectViewableData() {
        if (this.selectDept == 1) {//查看自己的商机
          this.title = '我的商机';
          this.initSpecialBusiness(
            this.scurrentPage,
            this.spageSize,
            this.bsName,
            this.speedId,
            this.employeesId,
            -1);
          this.initData(
            this.currentPage,
            this.pageSize,
            this.bsName,
            this.speedId,
            this.employeesId,
            -1);
        } else if (this.selectDept == 2) {//查看下属商机
          this.title = '下属商机';
          this.initSpecialBusiness(
            this.scurrentPage,
            this.spageSize,
            this.bsName,
            this.speedId,
            -1,
            this.deptId);
          this.initData(
            this.currentPage,
            this.pageSize,
            this.bsName,
            this.speedId,
            -1,
            this.deptId);
        } else if (this.selectDept == 3) {//查看全部商机
          this.title = '全部商机';
          this.initSpecialBusiness(
            this.scurrentPage,
            this.spageSize,
            this.bsName,
            this.speedId,
            -1,
            -1);
          this.initData(
            this.currentPage,
            this.pageSize,
            this.bsName,
            this.speedId,
            -1,
            -1);
        }
      },
      //初始化按钮
      initButton() {
        this.perssionButton = JSON.parse(sessionStorage.getItem("button"));
      },
      addBusiness() {
        this.$router.replace('/addbusiness')
      },
      //点击面板时需做的 清空上一个面板选中的复选框
      handleClick() {
        if (this.activeTab == 'first') {
          this.$refs.multipleTable.clearSelection();//清空复选框
        } else if (this.activeTab == 'second') {
          this.$refs.specialMultipleTable.clearSelection();//清空复选框
        }
      },
      //我的商机复选框选中的
      handleSelectionChange(val) {
        this.multipleTable = [];//先清空数据
        this.multipleTable = val;               //  this.multipleTable 选中的值
        let id = JSON.parse(sessionStorage.getItem('user')).employeesId;//当前用户id
        //复选框中的数据存在不是当前用户的数据，则不可对其数据进行操作
        let flag = true;
        this.multipleTable.forEach(item=>{
          if(id != item.budinessEmpid.employeesId){
            flag = false;
          }
        })
        if(flag==true){
          this.actionBar();//出现批量操作
        }else{
          this.hide();//隐藏部分操作按钮
        }
      },
      //隐藏部分批量操作
      hide(){
        if (this.multipleTable.length > 0) {
          this.isRow = false;//第一行隐藏
          this.isShow = true;//批量操作栏出现
          this.isOne = false;
          this.isDelete = false;
          this.noSpecial = false;
          this.isSpecial = false;
        }
      },
      //特别关注商机复选框选中
      specialHandleSelectionChange(val) {
        this.multipleTable = [];//先清空数据
        this.multipleTable = val; //  this.multipleTable 选中的值
        let id = JSON.parse(sessionStorage.getItem('user')).employeesId;//当前用户id
        //复选框中的数据存在不是当前用户的数据，则不可对其数据进行操作
        let flag = true;
        this.multipleTable.forEach(item=>{
          if(id != item.budinessEmpid.employeesId){
            flag = false;
          }
        })
        if(flag==true){
          this.actionBar();//出现批量操作
        }else{
          this.hide();//隐藏部分操作按钮
        }
      },

      //下载全部表格
      allExportExcel() {
        this.$confirm('确定导出表中所有数据吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.activeTab == 'first') {
            this.ExportExcel(this.exportSpecialData, this.colData1);
          } else if (this.activeTab == 'second') {
            this.ExportExcel(this.exportData, this.colData2);
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          });
        });

      },
      //批量下载表格前
      batchExportExcelBefore() {
        this.$confirm('确定导出勾选数据吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.activeTab == 'first') {
            this.ExportExcel(this.multipleTable, this.colData1);
          } else if (this.activeTab == 'second') {
            this.ExportExcel(this.multipleTable, this.colData2);
          }
          this.$message({
            type: 'success',
            message: '导出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          });
        });

      },
      href(row) {
        console.log("aa:"+row);
        let id = JSON.parse(sessionStorage.getItem('user')).employeesId;//当前用户id
        let status = 0;
        if(row.budinessEmpid.employeesId != id){
          status = 1;//非商机本负责人，只能查看
        }
        this.$router.push({
          path: '/businessdetails',
          query: {
            businesId: row.businesId,
            status:status
          }
        })
      },
      //导出
      ExportExcel(multipleTable, tableDataColunm) {
        var oppStauts = '';
        multipleTable.forEach((item, i) => {
          if (item.opportunityStatus == 1) {
            oppStauts = '跟踪';
          } else if (item.opportunityStatus == 2) {
            oppStauts = '搁置';
          } else if (item.opportunityStatus == 3) {
            oppStauts = '成功';
          } else if (item.opportunityStatus == 4) {
            oppStauts = '失败';
          }
          this.$set(item, 'cusName', item.customerByCustomId.cusName);
          this.$set(item, 'empName', item.budinessEmpid.empName);
          this.$set(item, 'cupName', item.culinkmanByCupId.cupName);
          this.$set(item, 'cupPhone', item.culinkmanByCupId.cupPhone);
          this.$set(item, 'speedContext', item.speedInfoBySpeedId.speedContext);
          this.$set(item, 'possibility', item.speedInfoBySpeedId.possibility);
          this.$set(item, 'expectedAmount1', number_format(item.expectedAmount, 2, ".", ","));
          this.$set(item, 'opportunityStatus1', oppStauts);
          this.$set(item, 'specialAttention', item.specialAttention = 0 ? '未关注' : '已关注');
          this.$set(item, 'updateTime1', formatTimeToStr(item.updateTime, 'yyyy-MM-dd'));
          this.$set(item, 'businessTime1', formatTimeToStr(item.businessTime, 'yyyy-MM-dd'));
          this.batchList.splice(i, 0, item);
        })
        //excel数据导出
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('../assets/Export2Excel');
          const tHeader = [];
          const filterVal = [];
          tableDataColunm.forEach((item) => {
            if (item.istrue == true) {
              this.tableInfo.forEach((val) => {
                if (item.title == val.name) {
                  tHeader.push(item.title);//表头
                  filterVal.push(val.value);//表字段
                }
              })
            }
          })
          const list = this.batchList;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '商机导出');
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }, //批量操作栏
      actionBar() {
        if (this.multipleTable.length > 0) {
          this.isRow = false;//第一行隐藏
          this.isShow = true;//批量操作栏出现
          this.isDelete = true;
        }
        //选中项大于1不能执行修改按钮
        if (this.multipleTable.length > 1) {
          this.isOne = false;
          this.noSpecial = false;
          this.isSpecial = false;
        } else if (this.multipleTable.length == 0) {//选中项为0时
          this.isRow = true;//第一行出现
          this.isShow = false;//批量操作栏隐藏
        } else {
          this.isOne = true;//修改出现
          if (this.multipleTable[0].specialAttention == 1) {//已关注的 取消关注按钮出现
            this.noSpecial = true;
            this.isSpecial = false;
          } else if (this.multipleTable[0].specialAttention == 0) {//未关注的 设置特别关注而按钮出现
            this.isSpecial = true;
            this.noSpecial = false;
          }
        }
      },
      //修改商机
      updataBusiness() {
        var businesId = this.multipleTable[0].businesId;
        if (this.multipleTable[0].speedInfoBySpeedId.speedContext == '签单') {
          this.$message({
            type: 'error',
            message: this.multipleTable[0].businessName + '商机不可修改！'
          })
        } else {
          //把商机id传入商机信息页面
          this.$router.push({
            path: '/addbusiness',
            query: {
              businesId: businesId
            }
          })
        }
      },
      //初始化数据
      initData(currentpage, pagesize, bsName, spId, employeesId, deptId) {
        this.$axios.get("http://localhost:8088/buInfo/select",
          {
            params: {
              page: currentpage,
              size: pagesize,
              businessName: bsName,
              speedId: spId,
              employeesId: employeesId,
              deptId: deptId
            }
          }).then(v => {
          this.businessList = v.data.rows;
          this.totalSize = v.data.total;
          this.exportData = v.data.businessInfoList;
          this.loading = false;
        }).catch()

      },
      //改变页大小
      changePage(page) {
        this.Second(page, this.pageSize);
      },
      handleSizeChange(val) {
        this.Second(1, val);
      },
      //特别关注商机
      initSpecialBusiness(scurrentpage, spagesize, bsName, spId, employeesId, deptId) {
        this.$axios.get("http://localhost:8088/buInfo/special_business",
          {
            params: {
              page: scurrentpage,
              size: spagesize,
              businessName: bsName,
              speedId: spId,
              employeesId: employeesId,
              deptId: deptId
            }
          }).then(v => {
          this.specialBusiness = v.data.specialBusiness;
          this.stotalSize = v.data.specialTotal;
          this.exportSpecialData = v.data.specialBusinessList;
          this.loading = false;
        }).catch()
      },
      //改变页大小
      schangePage(page) {
        this.First(page, this.spageSize);
      },
      shandleSizeChange(val) {
        this.First(1, val);
      },
      //商机名称模糊查询和进度查询
      searchInfo() {
        if (this.activeTab == 'first') {
          this.First(1, this.spageSize);
        } else if (this.activeTab == 'second') {
          this.Second(1, this.pageSize);
        }
      },     //查询通用方法
      First(currentPage, pagesize) {
        if (this.selectDept == 1) {//查看自己的商机
          this.initSpecialBusiness(
            currentPage,
            pagesize,
            this.bsName,
            this.speedId,
            this.employeesId,
            -1);
        } else if (this.selectDept == 2) {//查看下属商机
          this.initSpecialBusiness(
            currentPage,
            pagesize,
            this.bsName,
            this.speedId,
            -1,
            this.deptId);
        } else if (this.selectDept == 3) {//查看全部商机
          this.initSpecialBusiness(
            currentPage,
            pagesize,
            this.bsName,
            this.speedId,
            -1,
            -1);
        }
      },
      Second(currentPage, pagesize) {
        if (this.selectDept == 1) {//查看自己的商机
          this.initData(
            currentPage,
            pagesize,
            this.bsName,
            this.speedId,
            this.employeesId,
            -1);
        } else if (this.selectDept == 2) {//查看下属商机
          this.initData(
            currentPage,
            pagesize,
            this.bsName,
            this.speedId,
            -1,
            this.deptId);
        } else if (this.selectDept == 3) {//查看全部商机
          this.initData(
            currentPage,
            pagesize,
            this.bsName,
            this.speedId,
            -1,
            -1);
        }
      },
      //设置为特别关注商机 /  取消特别关注商机
      setSpecial(special) {
        var json = JSON.stringify({business: this.multipleTable, specialStatus: special});
        this.$axios.post("http://localhost:8088/buInfo/set_special"
          , this.qs.stringify({businessinfo: json})).then(() => {
          this.$message.success("操作成功");
          if (this.activeTab == 'first') {
            this.First(this.scurrentPage, this.spageSize);
          } else if (this.activeTab == 'second') {
            this.Second(this.scurrentPage, this.pageSize);
          }
          if (special == 1) {//将未特别关注的商机设为特别关注商机
            //进入特别关注商机面板
            this.activeTab = 'first';
          }

        }).catch();
      },
      //删除商机
      deleteBusiness() {
        this.$confirm('此操作将永久删除该商机, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var flag = true;//标记商机是否能删除
          this.multipleTable.forEach((item) => {
            if (item.speedInfoBySpeedId.speedContext == '签单') {//进度为签单的商机不可删除
              flag = false;
            }
          })
          if (flag == false) {//不能删除给出提示
            this.$message({
              type: 'error',
              message: '商机存在合同不可删除,请重新勾选！'
            })
          }
          if (flag == true) {//执行删除
            var data = JSON.stringify({businessList: this.multipleTable});
            this.$axios.post("http://localhost:8088/buInfo/delete_business",
              this.qs.stringify({business: data})).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新数据
              if (this.activeTab == 'first') {
                this.First(this.scurrentPage, this.spageSize);
              } else if (this.activeTab == 'second') {
                this.Second(this.scurrentPage, this.pageSize);
              }
            }).catch();
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }

  },
    computed:{
      //统计勾选得数量
      count(){
        return this.multipleTable.length
      }
    },
    watch: {
      colOptions1(valArr) {
        var arr = this.colSelect1.filter(i => valArr.indexOf(i) < 0); // 未选中
        this.colData1.filter(i => {
          if (arr.indexOf(i.title) != -1) {
            i.istrue = false;
            this.$nextTick(() => {
              this.$refs.specialMultipleTable.doLayout();
            });
          } else {
            i.istrue = true;
            this.$nextTick(() => {
              this.$refs.specialMultipleTable.doLayout();
            });
          }
        });
      },
      colOptions2(valArr) {
        var arr = this.colSelect2.filter(i => valArr.indexOf(i) < 0); // 未选中
        this.colData2.filter(i => {
          if (arr.indexOf(i.title) != -1) {
            i.istrue = false;
            this.$nextTick(() => {
              this.$refs.multipleTable.doLayout();
            });
          } else {
            i.istrue = true;
            this.$nextTick(() => {
              this.$refs.multipleTable.doLayout();
            });
          }
        });
      }
    },
    filters: {
      formatDate: function (time) {
        if (time != null && time != "") {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd");
        } else {
          return "";
        }
      },
      formatMoney(val) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = (val == (val = Math.abs(val)));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
        }
        return (((sign) ? "" : "-") + val + "." + cents);
      }
    }
  }
  function number_format(number, decimals, dec_point, thousands_sep) {
    /*
        * 参数说明：
        * number：要格式化的数字
        * decimals：保留几位小数
        * dec_point：小数点符号
        * thousands_sep：千分位符号
        * */
        number = (number + '').replace(/[^0-9+-Ee.]/g, '');
         var n = !isFinite(+number) ? 0 : +number,
           prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
           sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
           dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
           s = '',
           toFixedFix = function (n, prec) {
                   var k = Math.pow(10, prec);
                    return '' + Math.floor(n * k) / k;
                 };
           s = (prec ? toFixedFix(n, prec) : '' + Math.floor(n)).split('.');
           var re = /(-?\d+)(\d{3})/;
           console.log(s)
           while (re.test(s[0])) {
                s[0] = s[0].replace(re, "$1" + sep + "$2");
           }
           if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
              s[1] += new Array(prec - s[1].length + 1).join('0');
              }
           return s.join(dec);
       }
</script>
<style scoped>
  .row{
    border:1px solid #E9EEF3;
    width:100%;
    background: white;
    height:65px;
    box-shadow:#ccc 0px 0px 10px;
  }
  .operate{
    font-size: 12px;
    height: 47px;
    padding: 0 20px;
    color: #777;
    border: 1px solid #e6e6e6;
    background: white;
    box-shadow:#ccc 0px 0px 10px;
  }
  .col_border{
    border-right: 1px solid #e6e6e6;
    padding-left: 14px;
    height: 18px;
  }
  .col_border .el-button{
    margin-top: -3px;
  }
  .col_border1{
    padding-left: 14px;
  }
  .col_border1 .el-button{
    margin-top: -3px;
  }

  .dataOne{
    background: white;
    width:100%;
    overflow: hidden;
  }
  a{
    text-decoration: none;
    color:white;
  }
</style>
